<style lang="less">
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <card>
      <Row>
        <Col span="3" align="center" style="line-height: 2;">对接系统标识</Col>
        <Col span="4">
          <Input v-model="searchData.docking_system_id" style="width: 80%"  placeholder="请输入对接系统标识"></Input>
        </Col>
        <Col span="3" align="center" style="line-height: 2;">对接系统名称</Col>
        <Col span="4">
          <Input v-model="searchData.docking_system_name" style="width: 80%"  placeholder="请输入对接系统名称"></Input>
        </Col>
        <Col span="3">
          <Button type="primary" icon="ios-search"  @click="init">搜索</Button>
        </Col>
      </Row>
    </card>
    <card style="margin-top: 1%">
      <Row>
        <Col span="3">
          <Button type="primary" icon="md-add-circle" @click="addCommonDockingSystem">添加</Button>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <Table border stripe :columns="columns" ref="selection" :data="dataList" style="margin-top: 1%;">
            <template slot-scope="{ row }" slot="docking_system_id">
              <Input v-if="!row.disabled" :disabled="row.disabled" v-model="row.docking_system_id"></Input>
              <span  v-if="row.disabled">{{row.docking_system_id}}</span>
            </template>
            <template slot-scope="{ row }" slot="docking_system_name">
              <Input v-if="!row.disabled" :disabled="row.disabled" v-model="row.docking_system_name"></Input>
              <span  v-if="row.disabled">{{row.docking_system_name}}</span>
            </template>
            <template slot-scope="{ row }" slot="docking_system_params">
              <Input v-if="!row.disabled" :disabled="row.disabled" v-model="row.docking_system_params"></Input>
              <span  v-if="row.disabled">{{row.docking_system_params}}</span>
            </template>
          </Table>
        </Col>
      </Row>
      <Row type="flex" justify="end" style="margin-top: 1%">
        <Page :current="pageNo" :total="totalnum" show-sizer :page-size="pageSize"
              show-total @on-change="changePageNo" @on-page-size-change="changePagesize"/>
      </Row>
    </card>
    <Modal v-model="modal.show" :title="modal.title" width="360">
      <Form :model="formData" :label-width="100">
        <FormItem label="对接系统标识">
          <Input v-model="formData.docking_system_id" ></Input>
        </FormItem>
        <FormItem label="对接系统名称">
          <Input v-model="formData.docking_system_name"></Input>
        </FormItem>
        <FormItem label="对接系统参数">
          <Input v-model="formData.docking_system_params"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addCommonDockingSystemOk">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getCommonDockingSystemPageList,
  addCommonDockingSystem,
  updateCommonDockingSystem,
  deleteCommonDockingSystem } from '@/api/eventlist'
export default {
  components: {
  },
  data () {
    return {
      disabled: true,
      searchData: {},
      searchData1: {},
      row: {},
      export_database_id: '',
      tableData: [],
      targetKeys: [],
      listStyle: {
        width: '40%',
        height: '300px'
      },
      modal: {
        title: '',
        show: false,
        type: ''
      },
      modal1: {
        title: '',
        show: false,
        type: ''
      },
      infoModal: {
        title: '导出数据库表明细',
        show: false,
        type: ''
      },
      addTableModal: {
        title: '添加导出数据库表',
        show: false,
        type: ''
      },
      formData: {},
      formData1: {},
      totalnum: 0,
      pageNo: 1,
      pageSize: 10,
      totalnum1: 0,
      pageNo1: 1,
      pageSize1: 10,
      columns: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '对接系统标识', slot: 'docking_system_id', align: 'center' },
        { title: '对接系统名称', slot: 'docking_system_name', align: 'center' },
        { title: '对接系统参数', slot: 'docking_system_params', align: 'center' },
        { title: '操作',
          align: 'center',
          render: (h, params) => {
            let temp = []
            if (params.row.disabled) {
              temp.push(
                h('Button', {
                  props: { type: 'success', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      // this.formData = params.row
                      params.row.disabled = false
                      // console.log(params)
                      // this.modal.title = '编辑导出数据库'
                      // this.modal.show = true
                      // this.modal.type = '2'
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      this.deleteCommonDockingSystemOk(params.row)
                    }
                  }
                }, '删除'))
            } else {
              temp.push(h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.formData = params.row
                    this.updateCommonDockingSystemOk()
                    params.row.disabled = true
                    // console.log(params)
                    // this.modal.title = '编辑导出数据库'
                    // this.modal.show = true
                    // this.modal.type = '2'
                  }
                }
              }, '保存'),
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.init()
                    params.row.disabled = true
                  }
                }
              }, '取消'))
            }
            return h('div', temp)
          }
        }
      ],
      dataList: []
    }
  },
  methods: {
    init () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        docking_system_id: this.searchData.docking_system_id,
        docking_system_name: this.searchData.docking_system_name
      }
      getCommonDockingSystemPageList(params).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.results.forEach(function (temp) {
            temp.disabled = true
          })
          this.dataList = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addCommonDockingSystem () {
      this.modal.title = '添加对接系统设置'
      this.modal.show = true
      this.modal.type = '1'
      this.formData = {}
    },
    addCommonDockingSystemOk () {
      addCommonDockingSystem(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '添加成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '添加数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    updateCommonDockingSystemOk () {
      updateCommonDockingSystem(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '修改成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '修改数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteCommonDockingSystemOk (param) {
      deleteCommonDockingSystem(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    changePagesize (pageSize) {
      this.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.pageNo = pageNo
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
